<template>
  <el-dialog title="申请加入机构" width="1080px" class="gl_dialog_TitleLine" :close-on-click-modal="false" :visible.sync="dialogAddOrgan">
    <el-scrollbar v-loading="loading" wrap-class="scrollbar-wrapper gl_dialog_height fixHeight">
      <el-row :gutter="15" class="gl_mb_10">
        <el-col :span="8">
          <el-input v-model="delegationQO.Filter" clearable placeholder="请输入机构名称" size="mini" @change="getOrganData()" />
        </el-col>
        <el-col :span="16" class="search_btn">
          <el-button type="primary" size="mini" @click="getOrganData()">{{ $t('button.query') }}</el-button>
        </el-col>
      </el-row>
      <el-row v-loading="dialogLoading" :gutter="15">
        <el-col v-if="!delegationData.length" :span="24">
          <div class="gl_noData">
            <p>暂无数据</p>
          </div>
        </el-col>
        <template v-else>
          <el-col v-for="item in delegationData" :key="item.id" :span="8" class="gl_mt_10">
            <el-card shadow="hover" :body-style="{ padding: '10px', height: '110px' }">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-avatar shape="circle" :size="90" fit="scale-down" :src="getStaticAvatarUrl(item.imagePath)" />
                </el-col>
                <el-col :span="16">
                  <div class="gl_ft_weight gl_mb_5 gl_ellipsis" :title="item.name">{{ item.name }}</div>
                  <div class="gl_mb_5 gl_ellipsis">
                    <span style="color: #353434;font-size: 14px;">地区</span> {{ addressDataForCheck(item) }}
                  </div>
                  <div class="gl_mb_5">
                    <span style="color: #353434;font-size: 14px;">类型</span> {{ item.delegationType && item.delegationType.name }}
                  </div>
                  <div align="right">
                    <el-button size="mini" @click="handleSubmitAddOrgan(item.id)">申请加入</el-button>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </template>
      </el-row>
    </el-scrollbar>
    <template v-if="delegationData.length > 0">
      <div align="center" class="gl_pt_10">
        <el-pagination :current-page="delegationQO.Page" :page-size="delegationQO.MaxResultCount" :total="totalPage" layout="total,sizes,prev,pager,next,jumper" :page-sizes="[9, 18, 27, 36]" @size-change="sizeChange" @current-change="pageIndexChange" />
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { mapState } from 'vuex';
import { Api_GET_EventsManagementDelegationQO } from '@/lib/form/game/swaggerForm';
import {
  api_GET_EventsManagementDelegation,
  api_POST_EventsManagementDelegationEntry
} from '@/extend/api/gameswaggerApi/app';
export default {
  data() {
    return {
      dialogAddOrgan: false,
      dialogLoading: false,
      delegationQO: new Api_GET_EventsManagementDelegationQO(),
      delegationData: [],
      totalPage: 0,
      loading: false
    };
  },
  computed: {
    ...mapState({
      cache: state => state.dict.cache,
      currentUserType: state => state.user.currentUserType
    })
  },
  created() {
    this.delegationQO.MaxResultCount = 9;
  },
  methods: {
    open(registerId) {
      this.getOrganData();
      this.registerId = registerId;
      this.dialogAddOrgan = true;
    },
    // 查询可加入的机构列表
    getOrganData(page) {
      this.dialogLoading = true;
      this.delegationQO.Page = page || 1;
      this.delegationQO.SkipCount = (this.delegationQO.Page - 1) * this.delegationQO.MaxResultCount;
      this.delegationQO.IsApproved = null; // 查询审核通过的机构
      this.delegationQO.IsBelong = false;
      this.delegationQO.RegisterId = this.currentUserType.registerId;
      this.delegationQO.IncludeDelegationType = true;
      api_GET_EventsManagementDelegation(this.delegationQO).then(res => {
        this.dialogLoading = false;
        this.totalPage = res.totalCount;
        this.delegationData = res.items || [];
      });
    },
    // 申请加入团体
    handleSubmitAddOrgan(id) {
      const _qo = {
        registerId: this.registerId,
        delegationId: id,
        isApproved: null
      };
      api_POST_EventsManagementDelegationEntry(_qo).then(res => {
        this.$message({ type: 'success', message: '操作成功' });
        this.$emit('refreshPage');
        this.dialogAddOrgan = false;
      }, error => {
        this.$message({ type: 'error', message: (error.error && error.error.message || '') });
      });
    },
    sizeChange(MaxResultCount) {
      this.delegationQO.MaxResultCount = MaxResultCount;
      this.getOrganData();
    },
    pageIndexChange(currentPage) {
      this.getOrganData(currentPage);
    },
    addressDataForCheck (data) {
      const _provinceCode = data.provinceCode;
      const _cityCode = data.cityCode;
      const _countyCode = data.countyCode;
      let _provinceData;
      let _cityData;
      let _countyData;
      if (_provinceCode && this.cache.district) {
        _provinceData = this.cache.district.find(item => item.code === _provinceCode);
      }
      if (_cityCode && _provinceData) {
        _cityData = _provinceData.children.find(item => item.code === _cityCode);
      }
      if (_countyCode && _cityData) {
        _countyData = _cityData.children.find(item => item.code === _countyCode);
      }
      return `${_provinceData ? _provinceData.name : ''} ${_cityData ? _cityData.name : ''} ${_countyData ? _countyData.name : ''}`;
    },
    // 头像回显
    getStaticAvatarUrl(relativeUrl) {
      if (relativeUrl) {
        return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
      } else {
        return require('@/assets/images/face_default.png');
      }
    }
  }
};
</script>

<style lang="scss">
  .fixHeight{
    height:500px;
    padding-right: 8px;
  }
</style>
